import React, {Component} from 'react';
import {reqWeather} from '../../api/index'
import memoryUtils from "../../utils/memoryUtils";
import menuList from "../../config/menuConfig";
import {formateDate} from "../../utils/dateUtils";
import './index.less'
import {withRouter} from 'react-router-dom'
import { Modal, Button } from 'antd';
import stoageUtils from "../../utils/stoageUtils";
import LinkButton from "../link-button";

class Header extends Component {
    state = {
        currentTime: formateDate(Date.now()),
        weather_icon: '',
        weather_curr: '',
        isModalVisible: false
    }
    showModal = () => {
        this.setState({isModalVisible:true});
    };

    handleOk = () => {
        this.setState({isModalVisible:false})
        memoryUtils.user={}
        stoageUtils.removeUser()
        this.props.history.replace('/login')
    };

    handleCancel = () => {
        this.setState({isModalVisible:false})
    };
    getTime = ()=>{
        this.time = setInterval(()=>{
            const currentTime = formateDate(Date.now())
            this.setState({currentTime})
        },1000)
    }
    getWeather = async ()=>{
        const data = await reqWeather('衡水')
        const {weather_icon,weather_curr} = data.result
        console.log(weather_icon)
        this.setState({weather_icon,weather_curr})

    }
    getTitle = ()=>{
        const path = this.props.location.pathname
        let title
        menuList.forEach(
            item =>{
                if(item.key === path){
                    title = item.title
                }else if(item.children){
                    const cItem = item.children.find(cItem=>path.indexOf(cItem.key)===0)
                    if(cItem){
                        title = cItem.title
                    }
                }
            }
        )
        this.title = title
    }
    componentDidMount() {
        this.getTime()
        this.getWeather()
    }
    componentWillUnmount() {
        clearInterval(this.time)
    }

    render() {

        this.getTitle()
        const username = memoryUtils.user.username
        const {currentTime,weather_icon,weather_curr,isModalVisible} = this.state
        return (
            <div className="header">
                <div className="header-top">
                    <span>欢迎，{username}</span>
                    <LinkButton onClick={this.showModal}>
                        登出
                    </LinkButton>
                    <Modal title="Basic Modal" visible={isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel}>
                        <p>确定退出吗</p>
                    </Modal>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">
                        {this.title}
                    </div>
                    <div className="header-bottom-right">
                        <span>{currentTime}</span>
                        <img src={weather_icon} alt="weather"/>
                        <span>{weather_curr}</span>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(Header);